<template>
	<view class="recharge-container">
		<!-- 精美导航栏 -->
		<view class="premium-navbar">
			<view class="navbar-content">
				<view class="back-btn" @click="goBack">
					<view class="back-icon">←</view>
				</view>
				<view class="navbar-title-wrapper">
					<text class="navbar-title">充值中心</text>
					<view class="title-glow"></view>
				</view>
				<view class="detail-btn" @click="showDetail">
					<view class="detail-icon">📊</view>
				</view>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<view class="content-wrapper">
			<!-- 震撼英雄横幅 -->
			<view class="hero-banner">
				<view class="hero-bg">
					<view class="hero-content">
						<view class="hero-main">
							<view class="hero-badge">
								<text class="badge-text">💎 VIP充值特权</text>
							</view>
							<view class="hero-title">超值充值 豪礼相送</view>
							<view class="hero-subtitle">最高送150算力值 + 专属VIP权益</view>
							<view class="hero-cta">
								<text class="cta-text">限时福利，错过再等一年！</text>
							</view>
						</view>
						<view class="hero-visual">
							<view class="coins-stack">
								<view class="coin coin1">💰</view>
								<view class="coin coin2">💎</view>
								<view class="coin coin3">🔥</view>
							</view>
						</view>
					</view>
					<view class="hero-effects">
						<view class="effect-orb orb1"></view>
						<view class="effect-orb orb2"></view>
						<view class="effect-orb orb3"></view>
						<view class="sparkle sparkle1">✨</view>
						<view class="sparkle sparkle2">⭐</view>
						<view class="sparkle sparkle3">💫</view>
					</view>
				</view>
			</view>

			<!-- 当前余额卡片 -->
			<view class="balance-card">
				<view class="balance-header">
					<view class="balance-title">我的算力值</view>
					<view class="balance-refresh" @click="getCurrentBalance">🔄</view>
				</view>
				<view class="balance-display">
					<view class="balance-main">
						<view class="balance-icon">💎</view>
						<view class="balance-amount">{{ currentBalance }}</view>
					</view>
					<view class="balance-label">算力值</view>
				</view>
				<view class="balance-status" :class="currentBalance > 0 ? 'sufficient' : 'insufficient'">
					<text v-if="currentBalance > 0">余额充足，继续创作</text>
					<text v-else>余额不足，立即充值解锁更多功能</text>
				</view>
			</view>

			<!-- 超级套餐区域 -->
			<view class="super-packages">
				<view class="packages-header">
					<view class="header-main">
						<text class="packages-title">💰 选择充值套餐</text>
						<text class="packages-subtitle">越充越划算，最高立省72元</text>
					</view>
					<view class="popularity-indicator">
						<text class="popularity-text">🔥 {{ Math.floor(Math.random() * 1000 + 5000) }}人正在充值</text>
					</view>
				</view>

				<!-- 热门推荐大卡片 -->
				<view class="featured-package" @click="selectPackage(2)">
					<view class="featured-bg">
						<view class="featured-badge">
							<text class="featured-badge-text">⭐ 最受欢迎</text>
						</view>
						<view class="featured-content">
							<view class="featured-left">
								<view class="featured-tag">超值推荐</view>
								<view class="featured-amount">350<text class="featured-unit">算力值</text></view>
								<view class="featured-bonus">🎁 额外赠送20算力值</view>
								<view class="featured-save">立省7元</view>
							</view>
							<view class="featured-right">
								<view class="featured-price">
									<text class="price-symbol">¥</text>
									<text class="price-value">28</text>
								</view>
								<view class="featured-original">原价¥35</view>
								<view class="featured-discount">8折特惠</view>
							</view>
						</view>
						<view class="featured-glow"></view>
					</view>
				</view>

				<!-- 其他套餐网格 -->
				<view class="packages-grid">
					<view 
						class="package-card" 
						:class="{ 
							'selected': selectedPackage === index,
							'hot': pkg.hot && index !== 2,
							'premium': index > 3
						}" 
						v-for="(pkg, index) in packages" 
						:key="index"
						@click="selectPackage(index)"
						v-if="index !== 2"
					>
						<view class="card-badges" v-if="pkg.hot || pkg.discount">
							<view class="badge hot" v-if="pkg.hot">🔥</view>
							<view class="badge discount" v-if="pkg.discount">{{ pkg.discount }}</view>
						</view>
						
						<view class="card-header">
							<view class="card-title">{{ pkg.description }}</view>
							<view class="card-icon">💎</view>
						</view>
						
						<view class="card-amount">{{ pkg.amount }}</view>
						<view class="card-unit">算力值</view>
						
						<view class="card-pricing">
							<view class="card-price">¥{{ pkg.price }}</view>
							<view class="card-original" v-if="pkg.original">¥{{ pkg.original }}</view>
						</view>
						
						<view class="card-bonus" v-if="pkg.bonus">
							+{{ pkg.bonus }} 赠送
						</view>
						
						<view class="selection-indicator" v-if="selectedPackage === index">
							<view class="check-icon">✓</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 支付方式选择 -->
			<view class="payment-section">
				<view class="payment-header">
					<text class="payment-title">支付方式</text>
					<text class="payment-secure">🔒 安全加密</text>
				</view>
				<view class="payment-options">
					<view 
						class="payment-option" 
						:class="{ 'selected': selectedPayment === index }"
						v-for="(payment, index) in paymentMethods" 
						:key="index"
						@click="selectPayment(index)"
					>
						<view class="payment-logo">{{ payment.icon }}</view>
						<view class="payment-info">
							<view class="payment-name">{{ payment.name }}</view>
							<view class="payment-desc">安全快捷，即时到账</view>
						</view>
						<view class="payment-selector">
							<view class="radio-button" :class="{ 'checked': selectedPayment === index }">
								<view class="radio-dot" v-if="selectedPayment === index"></view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 信任保障 -->
			<view class="trust-section">
				<view class="trust-title">🛡️ 安全保障</view>
				<view class="trust-items">
					<view class="trust-item">
						<view class="trust-icon">🔐</view>
						<view class="trust-text">银行级加密</view>
					</view>
					<view class="trust-item">
						<view class="trust-icon">⚡</view>
						<view class="trust-text">秒速到账</view>
					</view>
					<view class="trust-item">
						<view class="trust-icon">🎯</view>
						<view class="trust-text">24h客服</view>
					</view>
					<view class="trust-item">
						<view class="trust-icon">💯</view>
						<view class="trust-text">100%安全</view>
					</view>
				</view>
			</view>

			<!-- 底部占位 -->
			<view class="bottom-spacer"></view>
		</view>

		<!-- 超级CTA按钮 -->
		<view class="super-cta">
			<view class="cta-container">
				<view class="cta-info" v-if="selectedPackage !== -1">
					<view class="cta-package">
						<view class="cta-amount">{{ packages[selectedPackage].amount }}算力值</view>
						<view class="cta-tag">{{ packages[selectedPackage].description }}</view>
					</view>
					<view class="cta-benefits">
						<view class="benefit-item" v-if="packages[selectedPackage].discount">
							<text class="benefit-text">{{ packages[selectedPackage].discount }}</text>
						</view>
						<view class="benefit-item" v-if="packages[selectedPackage].bonus">
							<text class="benefit-text">+{{ packages[selectedPackage].bonus }}</text>
						</view>
					</view>
				</view>
				<button class="mega-cta-btn" @click="handleRecharge" :disabled="selectedPackage === -1">
					<view class="cta-bg"></view>
					<view class="cta-content">
						<view class="cta-main">
							<text class="cta-price">¥{{ selectedPackage !== -1 ? packages[selectedPackage].price : 0 }}</text>
							<text class="cta-action">立即充值</text>
						</view>
						<view class="cta-save" v-if="selectedPackage !== -1 && packages[selectedPackage].original">
							<text class="save-amount">省¥{{ packages[selectedPackage].original - packages[selectedPackage].price }}</text>
						</view>
					</view>
					<view class="cta-shine"></view>
				</button>
			</view>
			<view class="terms">
				<text class="terms-text">充值即同意 </text>
				<text class="terms-link" @click="showAgreement">《用户协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentBalance: 0,
			selectedPackage: 2, // 默认选中推荐套餐(350算力值)
			selectedPayment: 0, // 默认选中支付宝
			packages: [
				{
					amount: 60,
					price: 6,
					original: null,
					discount: null,
					bonus: null,
					recommended: false,
					hot: false,
					description: '体验套餐'
				},
				{
					amount: 200,
					price: 18,
					original: 20,
					discount: '9折',
					bonus: 10,
					recommended: false,
					hot: true,
					description: '热门选择'
				},
				{
					amount: 350,
					price: 28,
					original: 35,
					discount: '8折',
					bonus: 20,
					recommended: true,
					hot: false,
					description: '超值推荐'
				},
				{
					amount: 500,
					price: 38,
					original: 50,
					discount: '7.6折',
					bonus: 30,
					recommended: false,
					hot: false,
					description: '进阶套餐'
				},
				{
					amount: 960,
					price: 68,
					original: 96,
					discount: '7折',
					bonus: 60,
					recommended: false,
					hot: true,
					description: '畅享套餐'
				},
				{
					amount: 2000,
					price: 128,
					original: 200,
					discount: '6.4折',
					bonus: 150,
					recommended: false,
					hot: false,
					description: '尊享套餐'
				}
			],
			paymentMethods: [
				{
					name: '支付宝支付',
					icon: '💰'
				},
				{
					name: '微信支付',
					icon: '💚'
				}
			]
		}
	},
	onLoad() {
		// 获取当前算力余额
		this.getCurrentBalance();
		// 设置状态栏样式
		uni.setNavigationBarColor({
			frontColor: '#000000',
			backgroundColor: '#ffffff'
		});
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		showDetail() {
			uni.showToast({
				title: '查看明细',
				icon: 'none'
			});
		},
		
		selectPackage(index) {
			this.selectedPackage = index;
		},
		
		selectPayment(index) {
			this.selectedPayment = index;
		},
		
		getCurrentBalance() {
			// 从本地存储获取当前余额
			this.currentBalance = uni.getStorageSync('userBalance') || 0;
		},
		
		handleRecharge() {
			if (this.selectedPackage === -1) {
				uni.showToast({
					title: '请选择充值套餐',
					icon: 'none'
				});
				return;
			}
			
			const pkg = this.packages[this.selectedPackage];
			const payment = this.paymentMethods[this.selectedPayment];
			
			uni.showModal({
				title: '确认充值',
				content: `确认使用${payment.name}充值${pkg.amount}算力值，需支付¥${pkg.price}？`,
				success: (res) => {
					if (res.confirm) {
						this.processPayment();
					}
				}
			});
		},
		
		processPayment() {
			const pkg = this.packages[this.selectedPackage];
			const payment = this.paymentMethods[this.selectedPayment];
			
			uni.showLoading({
				title: '正在跳转支付...'
			});
			
			// 模拟支付流程
			setTimeout(() => {
				uni.hideLoading();
				
				// 模拟支付结果 (90% 成功率)
				const isSuccess = Math.random() > 0.1;
				
				if (isSuccess) {
					let successMessage = '充值成功！';
					if (pkg.bonus) {
						successMessage += `额外获得${pkg.bonus}算力值奖励！`;
					}
					
					uni.showModal({
						title: '🎉 充值成功',
						content: `成功充值${pkg.amount}算力值！${pkg.bonus ? `\n🎁 额外获得${pkg.bonus}算力值奖励` : ''}\n现在可以畅享AI服务啦！`,
						showCancel: false,
						confirmText: '开始使用',
						success: () => {
							// 更新余额（包含奖励）
							const totalAmount = pkg.amount + (pkg.bonus || 0);
							this.currentBalance += totalAmount;
							
							// 保存余额到本地存储
							uni.setStorageSync('userBalance', this.currentBalance);
							
							// 触发余额更新事件，通知其他页面
							uni.$emit('balanceUpdated', this.currentBalance);
							
							// 返回上一页
							uni.navigateBack();
						}
					});
				} else {
					uni.showModal({
						title: '支付失败',
						content: '支付过程中出现问题，请重试或联系客服',
						showCancel: true,
						cancelText: '重试',
						confirmText: '联系客服',
						success: (res) => {
							if (res.confirm) {
								this.contactService();
							} else if (res.cancel) {
								// 重新选择支付
							}
						}
					});
				}
			}, 2000);
		},
		
		showAgreement() {
			uni.showToast({
				title: '查看充值协议',
				icon: 'none'
			});
		},
		
		contactService() {
			uni.showToast({
				title: '联系客服',
				icon: 'none'
			});
		}
	}
}
</script>

<style scoped>
.recharge-container {
	width: 100%;
	min-height: 100vh;
	background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 50%, #f0fdf4 100%);
	position: relative;
}

/* 导航栏样式 */
.custom-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: calc(44px + var(--status-bar-height));
	background: rgba(255,255,255,0.98);
	backdrop-filter: blur(30rpx);
	-webkit-backdrop-filter: blur(30rpx);
	border-bottom: 1rpx solid rgba(74, 222, 128, 0.2);
	box-shadow: 0 2rpx 20rpx rgba(74, 222, 128, 0.1);
}

.navbar-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 44px;
	margin-top: var(--status-bar-height);
	padding: 0 40rpx;
}

.back-btn {
	width: 80rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.back-icon {
	font-size: 48rpx;
	color: #10b981;
	font-weight: 300;
}

.navbar-title {
	font-size: 36rpx;
	font-weight: 700;
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.detail-btn {
	width: 80rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.detail-text {
	font-size: 28rpx;
	color: #10b981;
	font-weight: 500;
}

.content-wrapper {
	padding-top: calc(44px + var(--status-bar-height) + 20rpx);
	padding-bottom: 200rpx;
	min-height: 100vh;
}

/* 限时优惠横幅 */
.promotion-banner {
	margin: 20rpx 30rpx 30rpx;
	border-radius: 25rpx;
	overflow: hidden;
	position: relative;
}

.promo-bg {
	background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 50%, #ffb3ba 100%);
	padding: 30rpx;
	position: relative;
	overflow: hidden;
}

.promo-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 2;
}

.promo-left {
	display: flex;
	align-items: center;
	flex: 1;
}

.promo-icon {
	font-size: 40rpx;
	margin-right: 15rpx;
}

.promo-text {
	flex: 1;
}

.promo-title {
	display: block;
	font-size: 32rpx;
	font-weight: 700;
	color: white;
	text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
	margin-bottom: 4rpx;
}

.promo-subtitle {
	display: block;
	font-size: 22rpx;
	color: rgba(255,255,255,0.9);
	line-height: 1.3;
}

.promo-right {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.promo-fire {
	font-size: 36rpx;
	animation: bounce 2s infinite;
	margin-bottom: 8rpx;
}

.promo-time {
	font-size: 18rpx;
	color: rgba(255,255,255,0.9);
	background: rgba(255,255,255,0.2);
	padding: 4rpx 8rpx;
	border-radius: 8rpx;
	font-weight: 600;
}

@keyframes bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10rpx); }
}

.promo-particles {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

.particle {
	position: absolute;
	width: 8rpx;
	height: 8rpx;
	background: rgba(255,255,255,0.6);
	border-radius: 50%;
	animation: float 3s infinite linear;
}

.particle1 {
	top: 20%;
	left: 10%;
	animation-delay: 0s;
}

.particle2 {
	top: 60%;
	left: 80%;
	animation-delay: 1s;
}

.particle3 {
	top: 40%;
	left: 60%;
	animation-delay: 2s;
}

.particle4 {
	top: 30%;
	left: 85%;
	animation-delay: 1.5s;
}

@keyframes float {
	0% { transform: translateY(0) rotate(0deg); opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { transform: translateY(-100rpx) rotate(360deg); opacity: 0; }
}

/* 当前算力显示 - 升级版 */
.balance-section {
	margin: 0 30rpx 40rpx;
	background: rgba(255,255,255,0.95);
	backdrop-filter: blur(30rpx);
	-webkit-backdrop-filter: blur(30rpx);
	border-radius: 25rpx;
	padding: 40rpx;
	box-shadow: 
		0 8rpx 32rpx rgba(16, 185, 129, 0.15),
		0 0 0 1rpx rgba(16, 185, 129, 0.1);
	position: relative;
	overflow: hidden;
}

.balance-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4rpx;
	background: linear-gradient(90deg, #10b981 0%, #34d399 50%, #6ee7b7 100%);
}

.balance-content {
	text-align: center;
}

.balance-label {
	font-size: 28rpx;
	color: #6b7280;
	margin-bottom: 20rpx;
	font-weight: 500;
}

.balance-display {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20rpx;
}

.balance-icon {
	font-size: 60rpx;
	margin-right: 20rpx;
}

.balance-amount {
	font-size: 100rpx;
	font-weight: 800;
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.3);
}

.balance-unit {
	font-size: 32rpx;
	color: #6b7280;
	margin-left: 10rpx;
	font-weight: 600;
}

.balance-tip {
	font-size: 26rpx;
	color: #ef4444;
	font-weight: 500;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

@import url('./styles.css');
</style>